import index from './index.scss'
import {
    Breadcrumb, Form, Input, Image, Select, Button, message,
    Upload, Radio, Space, DatePicker,
} from 'antd';
import { useNavigate, useLocation } from 'react-router-dom';
import { useState, useEffect } from 'react';
import { UploadOutlined, PlusOutlined, LoadingOutlined } from '@ant-design/icons';

function GrapEdit() {
    const location = useLocation()
    const [Editform] = Form.useForm()
    const [EditVale, setEditVale] = useState({})
    useEffect(() => {
        let locationData = location.state
        const values = locationData.value
        console.log(values);
        setEditVale(values)
        Editform.setFieldsValue(values)
    }, [])



    // 文本域内容
    const { TextArea } = Input;
    //上传
    const props = {
        name: 'file',
        action: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
        headers: {
            authorization: 'authorization-text',
        },

        onChange(info) {
            if (info.file.status !== 'uploading') {
                console.log(info.file, info.fileList);
            }

            if (info.file.status === 'done') {
                message.success(`${info.file.name} file uploaded successfully`);
            } else if (info.file.status === 'error') {
                message.error(`${info.file.name} file upload failed.`);
            }
        },
    };
    // 时间选择器
    const { RangePicker } = DatePicker;
    const [size, setSize] = useState('small');
    const tijiao = () => {
        console.log(Editform.getFieldsValue());
    }
    //返回
    const returnNav = useNavigate()
    const returnGrap = () => {
        returnNav('/home/course/graphic')
    }
    // 上传照片
    const normFile = (e) => {
        console.log('Upload event:', e);
        if (Array.isArray(e)) {
            return e;
        }
        return e && e.fileList;
    }
    return <div className='BigGrapjump' style={index}>
        <div className='top'>
            <Breadcrumb>
                <Breadcrumb.Item>课程管理</Breadcrumb.Item>
                <Breadcrumb.Item>
                    <a href="">图文课程</a>
                </Breadcrumb.Item>
                <Breadcrumb.Item>编辑图文课程</Breadcrumb.Item>
            </Breadcrumb>
            <h2 className='top-tit'>编辑图文课程</h2>
        </div>
        <div className='mid-con'>
            <h3>基础信息</h3>
            <Form
                name="basic"
                labelCol={{
                    span: 4,
                }}
                wrapperCol={{
                    span: 10,
                }}
                form={Editform}
                initialValues={{
                    coursefenlei: '1'
                }}
            >
                <Form.Item
                    label="图文名称"
                    name="coursename"
                    rules={[{ required: true, },]}
                >
                    <Input />
                </Form.Item>
                <Form.Item
                    label='图文封面'
                    name='Src'
                    valuePropName="file"
                    getValueFromEvent={normFile}
                    rules={[{ required: true, },]}
                >
                    <Upload name="logo" action="/" listType="picture">
                        <Button icon={<UploadOutlined />}>Click to upload</Button>
                    </Upload>

                    {/* <Image
                        width={200}
                        height={100}
                        src={EditVale.Src}
                    /> */}
                </Form.Item>
                <Form.Item
                    label="课程分类"
                    name="coursefenlei"
                    rules={[{ required: true, },]}
                >
                    <Select>
                        <Select.Option value="1">一级类目</Select.Option>
                        <Select.Option value="2">二级类目</Select.Option>
                    </Select>
                </Form.Item>
                <Form.Item label="课程描述" name='coursemiaoshu'>
                    <TextArea rows={4} />
                </Form.Item>
                <Form.Item label="上传资料" >
                    <Upload {...props}>
                        <Button icon={<UploadOutlined />}>点击上传</Button>
                    </Upload>
                </Form.Item>

            </Form>
        </div>
        <div className='shoumai'>
            <h3>售卖信息</h3>
            <Form
                name='ba'
                labelCol={{
                    span: 4,
                }}
                wrapperCol={{
                    span: 10,
                }}
                form={Editform}
                initialValues={{
                    radiogroup: '1'
                }}
            >
                <Form.Item
                    label="课程价格"
                    name="coursePrice"
                    rules={[{ required: true, },]}
                >
                    <Input suffix="元" />
                </Form.Item>
                <Form.Item
                    label="库存"
                    name="kucun"
                >
                    <Input placeholder='请输入' />
                </Form.Item>
                <Form.Item name="radiogroup" label="上架时间" rules={[{ required: true, },]}>
                    <Radio.Group>
                        <Space direction="vertical">
                            <Radio value="1">立即上架</Radio>
                            <Radio value="2">定时上架</Radio>
                            <Radio value="3">暂不上架</Radio>
                        </Space>
                    </Radio.Group>

                </Form.Item>
                <Form.Item name="datetime" className='times' wrapperCol={{ span: 24 }}>
                    <RangePicker size={size} />
                </Form.Item>

                <Form.Item>
                    <Space className='Btnanniu'>
                        <Button type='primary' onClick={tijiao}>提交</Button>
                        <Button className='quxiao' onClick={returnGrap}>返回</Button>

                    </Space>
                </Form.Item>
            </Form>
        </div>

    </div>
}
export default GrapEdit